<template>
  <div class="my-5 flex flex-col items-center justify-center space-y-3">
    <view class="flex items-center">
      使用「
      <n-icon :size="20" color="green">
        <icon icon="ri:wechat-fill"></icon>
      </n-icon>
      微信
      」扫描二维码登录
    </view>
    <img :src="qrcode" alt="QR Code"/>
    <n-button @click="handleReGet" text>
      <TextIcon icon="uiw:reload" :size="15" text="重新获取"></TextIcon>
    </n-button>
  </div>
</template>

<script setup lang="ts">
import {Icon} from "@iconify/vue";
import {onMounted} from 'vue'
import {useQRCode} from '@vueuse/integrations/useQRCode'
import TextIcon from "@/components/pc/icon/TextIcon.vue";
import {useWebSocketStore} from "@/store/module/webSocket";
import {storeToRefs} from "pinia";

const webSocketStore = useWebSocketStore()
const {loginUrl} = storeToRefs(webSocketStore)
const qrcode = useQRCode(loginUrl)
onMounted(() => {
  handleReGet()
})

const handleReGet = () => {
  webSocketStore.loginReq()
}


</script>

<style scoped>

</style>